@import "../../mixins/buttons/button.less";
@import "../../mixins/box-shadow.less";

/* variables */
@padding-max:20px;
@padding-med:10px;
@padding-min:5px;

@margin-max:20px;
@margin-med:10px;
@margin-min:5px;


html, body {
	height:100%;
}

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
* { margin:0; padding:0 }

body {
	font-family:'Open Sans', Arial, Helvetica, sans-serif;
	font-size:100%;
	color:#000;
	line-height:150%;
	padding:@padding-max;
}

h1 {
	font-size:3em;
	
	margin:@margin-med 0;
}

h2 {
	font-size:2.5em;
}

h3 {
	font-size:2em;
}

h4 {
	font-size:1.5em;
}

h5 {
	font-size:1.2em;
}

h6 {
	font-size:1em;
}



pre {
  text-wrap: wrap;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  word-wrap: break-word;
}

.usage, .usage pre { 
	color:#333;
}

@bubblecolor: #e33100;
@bubblehover: #872300;

/* .button(@width:auto, @height:auto, @margin:auto, @padding:auto, @font:1em, @bgcolor:black, @color:#fff, @hover:#ccc, @hoverfont:#fff, @radius:5px) */

.button1 {
	.button(200px, auto, 20px 20px 70px 20px, @padding-med, 1em, @bubblecolor, #fff, @bubblehover);
	.box-shadow(1px, 1px, 1px, 1px, rgba(0,0,0,.5));
	border:1px solid #ccc;
}

.button2 {
	.button(auto, auto, auto, 10px 20px, 1em, black, #fff, #ccc, #fff, 5px);
	
}


